<template>
	<div class="flex-wrap-column">
		<CustomTabs :tabList="tabList" v-model:tabActive="tabActive" />
		<CustomGmSearch
			:col="columns"
			:tableData="tableData"
			:formList="formList"
			:controlList="controlList"
			v-model:formData="formData"
			@control-handel="controlHandel"
		>
		</CustomGmSearch>
	</div>
	<custom-dialog
		v-model:visible="visible"
		title="系统提醒"
		:fnConfig="{
			fn: exitFn,
		}"
		@confirm="confirm"
	>
		<template #toast> {{ topicTitle }} </template>
	</custom-dialog>
	<!-- 对话框 -->
	<el-dialog
		v-model="dialogFormVisible"
		width="1143px"
		:show-close="false"
		custom-class="dialogWrap"
	>
		<DialogContent
			v-if="dialogFormVisible"
			v-model:dialogShow="dialogFormVisible"
			@submit="submit"
			:title="diaTitle"
			:rowInfo="rowInfo"
		/>
	</el-dialog>
</template>

<script setup lang="ts">
import CustomTabs from '@/components/customTabs/index.vue'
import CustomGmSearch from '@/components/customGmSearch/index.vue'
import DialogContent from '@/views/infoCenter/components/index.vue'

import {
	getEnterpriseById,
	getDepartmentsById,
	getCompanyMemberList,
	getCompanyMemberListDisable,
	employeesEnable,
	employeesDisable,
} from '@/api/company'
import { userStorage } from '@/utils/storage'
import { ElMessage } from 'element-plus'
import { useBaseIndexStore } from '@/stores/index'
const { departmentList, getGroupList } = useBaseIndexStore()
const openDialog = inject('openDialog')
const changeVisible = inject('changeVisible') as Function
const dialogFormVisible = ref(false)
const diaTitle = ref('')

watch(
	() => openDialog,
	(val) => {
		dialogFormVisible.value = val.value
		diaTitle.value = '添加成员'
	},

	{
		deep: true,
		immediate: true,
	}
)
const rowInfo = ref(null)

watch(
	() => dialogFormVisible.value,
	(val) => {
		if (diaTitle.value !== '修改成员') {
			changeVisible(val)
		}
	},
	{
		immediate: true,
	}
)
const submit = () => {
	getCompanyMemberInfoList(true)
}
const tabList = [
	{
		label: '全部成员',
		id: 1,
	},
	{
		label: '已禁止',
		id: 2,
	},
]
const tabActive = ref(1)
interface formItem {
	type: string
	props: string
	set?: {
		placeholder: string
	}
	options?: Array<{
		label: string
		value: number | string
	}>
}
const formData = reactive({
	enterpriseId: userStorage.get().enterpriseId,
	departmentId: '',
	groupId: null,
	keyword: '',
})
watch(
	() => formData,
	() => {
		getCompanyMemberInfoList(tabActive.value === 1)
	},
	{
		deep: true,
	}
)
// 监听部门列表选择变化
const groupList = ref([])
watch(
	() => formData.departmentId,
	(val) => {
		formData.groupId = null
		groupList.value = []
		getGroupList(val).then((res) => {
			groupList.value = res
		})
	}
)
const formList = computed<formItem[]>(() => [
	{
		type: 'select',
		props: 'departmentId',
		set: {
			placeholder: '请选择部门',
		},
		options: departmentList,
	},
	{
		type: 'select',
		props: 'groupId',
		set: {
			placeholder: '请选择部门分组',
		},
		options: [{ label: '全部分组', value: '' }, ...groupList.value],
	},
	{
		type: 'searchInput',
		props: 'keyword',
		set: {
			placeholder: '搜索姓名/昵称',
		},
	},
])
const controlList = [
	{
		icon: 'menu',
	},
	{
		icon: 'deliver',
	},
	{
		icon: 'transform',
	},
]
const columns = ref([
	{ prop: 'staffId', label: '员工ID', width: 120 },
	{ prop: 'avatar', label: '头像', type: 'avatar', width: 80 },
	{ prop: 'employeeName', label: '姓名', type: 'link', width: 150 },
	{ prop: 'nickname', label: '昵称', width: 150 },
	{ prop: 'departmentName', label: '部门', width: 200 },
	{ prop: 'groupName', label: '部门分组', width: 200 },
	{ prop: 'loginMobile', label: '手机', width: 200 },
	{ prop: 'roleName', label: '角色', width: 200 },
	{ prop: 'object', label: '汇报对象', width: 200 },
	{ prop: 'accountStatus', label: '账号状态', type: 'status', width: 200 },
	{
		prop: 'control',
		label: '操作',
		type: 'control',
		width: 80,
		fixed: 'right',
		set: {
			orderList: [
				{
					title: '编辑',
					icon: 'edit',
				},
				{
					title: '禁止',
					icon: 'disabled',
				},
				{
					title: '数据转移',
					icon: 'dataTransfer',
				},
			],
		},
	},
])
watch(
	() => tabActive.value,
	(val) => {
		if (val === 1) {
			getCompanyMemberInfoList(true)
			columns.value[columns.value.length - 1].set.orderList = [
				{
					title: '编辑',
					icon: 'edit',
				},
				{
					title: '禁止',
					icon: 'disabled',
				},
				{
					title: '数据转移',
					icon: 'dataTransfer',
				},
			]
		} else {
			getCompanyMemberInfoList(false)

			columns.value[columns.value.length - 1].set.orderList = [
				{
					title: '激活',
					icon: 'active',
				},
				{
					title: '数据转移',
					icon: 'dataTransfer',
				},
			]
		}
	},
	{
		deep: true,
	}
)
// 操作列操作
const visible = ref(false)
const exitFn = () => {}
const topicTitle = ref('')
const rowData = ref(null)
const controlHandel = (e, row: any) => {
	rowData.value = row
	switch (e) {
		case '编辑':
			dialogFormVisible.value = true
			diaTitle.value = '修改成员'
			rowInfo.value = rowData.value
			break
		case '禁止':
			visible.value = true
			topicTitle.value = '确定禁止用户登录？'
			break
		case '激活':
			topicTitle.value = '确认激活用户？'
			visible.value = true
			break
	}
}
const confirm = async () => {
	const { id } = rowData.value
	try {
		const { code, message } =
			tabActive.value === 1
				? await employeesDisable({
						id,
				  })
				: await employeesEnable({
						id,
				  })
		if (code === 200) {
			ElMessage.success(message)
			getCompanyMemberInfoList(tabActive.value === 1)
		} else {
			ElMessage.error(message)
		}
	} catch (error) {}

	visible.value = false
}
const tableData = ref([])

const getCompanyMemberInfoList = async (flag) => {
	const { code, data: res } = flag
		? await getCompanyMemberList(formData)
		: await getCompanyMemberListDisable(formData)
	if (code === 200) {
		tableData.value = res
			? (res as Array<any>).map((item) => {
					if (item.accountStatus === 1) {
						item.accountStatus = '正常'
					} else {
						item.accountStatus = '禁用'
					}
					return item
			  })
			: []
	}
}
getCompanyMemberInfoList(true)
</script>

<style scoped lang="less"></style>
